<template>
  <div class="w-100 h-100 flex-vertical">
    <div class="header-wrapper flex-header flex-item align-items-center justify-content-between mb-4 p-2 text-zero">
      <div class="left-box flex-label">
        <img class="w-100 h-100" src="@img/friend/avatar.png" alt="" />
      </div>
      <div class="flex-content d-flex align-items-center justify-content-center text-md">
        <div v-for="(item, index) in tabList" :key="index" class="tab-item mx-3" :class="{ active: active === index + 1 }" @click="active = index + 1">{{ item }}</div>
      </div>
      <div @click="$router.push('/search')" class="right-box flex-label flex-center-center">
        <svg t="1683718874242" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6649" width="2.4rem" height="2.4rem">
          <path
            d="M288.467663 288.811692 83.082815 288.811692c-18.921552 0-34.230808-15.309256-34.230808-34.058794s15.309256-34.058794 34.230808-34.058794l205.212834 0c18.921552 0 34.230808 15.309256 34.230808 34.058794S307.217201 288.811692 288.467663 288.811692L288.467663 288.811692zM280.038972 625.959348 83.082815 625.959348c-18.921552 0-34.230808-15.309256-34.230808-34.058794 0-18.749538 15.309256-34.058794 34.230808-34.058794l196.956157 0c18.921552 0 34.230808 15.309256 34.230808 34.058794C314.26978 610.650092 298.960524 625.959348 280.038972 625.959348L280.038972 625.959348zM239.615656 457.041492l-156.532841 0c-18.921552 0-34.230808-15.309256-34.230808-34.230808 0-18.921552 15.309256-34.230808 34.230808-34.230808l156.532841 0c18.921552 0 34.230808 15.309256 34.230808 34.230808C273.846464 441.732236 258.537208 457.041492 239.615656 457.041492L239.615656 457.041492zM459.965732 801.069713l-376.710902 0c-18.921552 0-34.230808-15.309256-34.230808-34.230808S64.333277 732.780111 83.254829 732.780111l376.710902 0c18.921552 0 34.230808 15.309256 34.230808 34.230808C494.19654 785.760457 478.887284 801.069713 459.965732 801.069713L459.965732 801.069713z"
            fill="#ffffff"
            p-id="6650"
          ></path>
          <path
            d="M420.746514 426.078952c0-115.765496 94.435747-210.029229 210.545271-210.029229s210.545271 94.091718 210.545271 210.029229S747.40131 636.108181 631.291786 636.108181 420.746514 541.844448 420.746514 426.078952L420.746514 426.078952 420.746514 426.078952zM967.751386 816.206954l-147.416093-192.48379c52.29229-49.884092 85.146985-119.893835 85.146985-197.472199 0-150.684361-122.990089-273.330422-274.190492-273.330422s-274.190492 122.646061-274.190492 273.330422 122.990089 273.330422 274.190492 273.330422c48.679993 0 94.263733-12.901058 133.998992-35.090879l147.932135 193.171846c6.70855 8.77272 17.029397 13.589115 27.178229 13.589115 7.224593 0 14.621199-2.236183 20.641693-7.052579C976.352091 852.501932 979.104317 831.000168 967.751386 816.206954L967.751386 816.206954 967.751386 816.206954zM778.707878 424.874853c0 81.018646-65.70939 146.556022-146.556022 146.556022s-146.556022-65.70939-146.556022-146.556022 65.70939-146.556022 146.556022-146.556022S778.707878 344.028221 778.707878 424.874853z"
            fill="#ffffff"
            p-id="6651"
          ></path>
        </svg>
      </div>
    </div>
    <div class="list-wrapper flex-content no-scroll w-100 px-3 d-flex justify-content-around flex-wrap text-plus">
      <div v-for="(item, index) in list" :key="index" class="tab-box mb-2">
        <div class="img-box flex-center-center overflow-hidden">
          <img class="w-100" :src="item.img" alt="" />
        </div>
        <div class="px-2">
          <div class="text-min mt-3 mb-1">{{ item.title }}</div>
          <div class="flex-item align-items-center text-min">
            <div class="avatar flex-label overflow-hidden">
              <img class="w-100" :src="item.avatar" alt="" />
            </div>
            <div class="flex-content px-1">{{ item.name }}</div>
            <div class="flex-label flex-center-center">
              <svg v-if="!item.isStar" t="1683717999772" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5322" width="1rem" height="1rem">
                <path
                  d="M700 192c92.8 0 166.4 72.8 166.4 166.4 0 129.6-133.6 251.2-336.8 435.2l-17.6 16-17.6-16C291.2 609.6 157.6 488 157.6 358.4c0-92.8 72.8-166.4 166.4-166.4 52.8 0 104.8 24 140 64.8l48.8 56.8 48.8-56.8c33.6-40 86.4-64.8 138.4-64.8m0-64c-72.8 0-142.4 33.6-188 87.2C466.4 162.4 396.8 128 324 128c-128.8 0-230.4 100.8-230.4 230.4 0 157.6 142.4 287.2 357.6 482.4L512 896l60.8-55.2c215.2-196 357.6-324.8 357.6-482.4 0-128.8-100.8-230.4-230.4-230.4z"
                  p-id="5323"
                  fill="#000000"
                ></path>
              </svg>
              <svg v-else t="1683718036341" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5621" width="1rem" height="1rem">
                <path d="M512 896l-60.8-55.2C236 645.6 93.6 516 93.6 358.4 93.6 229.6 194.4 128 324 128c72.8 0 142.4 33.6 188 87.2C557.6 162.4 627.2 128 700 128c128.8 0 230.4 100.8 230.4 230.4 0 157.6-142.4 287.2-357.6 482.4L512 896z" p-id="5622" fill="#d81e06"></path>
              </svg>
              <span @click="onStar(item)" class="ml-1">{{ item.star }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const tabList = ['关注', '发现', '附近'];
const active = ref(1);

const list = ref([
  {
    name: '厘米',
    title: '我的狗狗也太可爱了吧',
    star: '574',
    img: require('@img/friend/1.png'),
    avatar: require('@img/friend/1.png'),
    isStar: false
  },
  {
    name: '香自自',
    title: '人间萌物',
    star: '1.4w',
    img: require('@img/friend/2.png'),
    avatar: require('@img/friend/2.png'),
    isStar: false
  },
  {
    name: '橙子不打折',
    title: '这谁家的崽崽呀...',
    star: '5683',
    img: require('@img/friend/3.png'),
    avatar: require('@img/friend/3.png'),
    isStar: false
  },
  {
    name: '柯基超乖',
    title: '来欣赏我家主子的美貌',
    star: '666',
    img: require('@img/friend/4.png'),
    avatar: require('@img/friend/4.png'),
    isStar: false
  },
  {
    name: '我喜欢',
    title: '真么好乖耶',
    star: '888',
    img: require('@img/friend/5.png'),
    avatar: require('@img/friend/5.png'),
    isStar: false
  },
  {
    name: '哈哈哈',
    title: '这是什么面包',
    star: '999',
    img: require('@img/friend/6.png'),
    avatar: require('@img/friend/6.png'),
    isStar: false
  }
]);

const onStar = (item) => {
  item.isStar = !item.isStar;
  if (item.isStar) item.star++;
  else item.star--;
};
</script>

<style lang="less" scoped>
@import '~@style/variable.less';
.header-wrapper {
  background-color: @bg3;
  .left-box,
  .right-box {
    width: 3rem;
    height: 3rem;
  }

  .tab-item {
    transition: all linear 150ms;
    &.active {
      font-size: 2rem;
      font-weight: bold;
    }
  }
}
.list-wrapper {
  .tab-box {
    width: 10rem;
    .img-box {
      width: 10rem;
      height: 10rem;
      background-color: @bg1;
      border-radius: 1rem;
    }
    .avatar {
      width: 1.6rem;
      height: 1.6rem;
      border-radius: 50%;
    }
  }
}
</style>
